<template>
    <div class="yorha-dialog-hover">
        <yorha-normal-box width="550px" height="300px" :title="title">
            <div class="yorha-dialog-msg">
                {{contain}}
            </div>
            <yorha-hr></yorha-hr>
            <div class="yorha-dialog-btn-box">
                <yorha-small-button
                        @click="!confirmHandler?confirm():confirmHandler()">Confirm</yorha-small-button>
            </div>
        </yorha-normal-box>
    </div>

</template>

<script setup>
import YorhaNormalBox from "../YorhaNormalBox/YorhaNormalBox.vue"
import YorhaHr from "../YorhaHr/YorhaHr.vue";
import YorhaSmallButton from "../YorhaSmallButton/YorhaSmallButton.vue"

let props = defineProps(['contain', 'title', 'confirmHandler'])
let emits = defineEmits(['confirm'])

/*
* 当没有传入props的时候，调用以下两个方法
* */
function confirm() {
    emits('confirm')
}

</script>

<style lang="less" scoped>
@import "../../style";
.yorha-dialog-hover {
    .yorha-hover;
}

.yorha-dialog-msg {
    width: 100%;
    height: 180px;
    box-sizing: border-box;
    padding: 10px;
    font-size: 20px;
    color: @gray;
}

.yorha-dialog-btn-box {
    width: 100%;
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: space-around;

}
</style>